<template>
  <div class="box">
    <div class="left">
      <div class="leftTitle">客户列表</div>
      <div style="padding: 0px 10px">
        <el-input
          placeholder="请输入内容"
          suffix-icon="el-icon-search"
          v-model="searchInput"
          @input="searchInputFn"
        >
        </el-input>
      </div>
      <div class="searchList">
        <div
          v-for="(v, i) in searchList"
          :key="v.id"
          :class="
            count === i ? 'searchListItemAct searchListItem' : 'searchListItem'
          "
          @click="clickFn(v, i)"
        >
          {{ v.customerNM }}
        </div>
      </div>
      <div style="text-align: center">
        <el-button
          type="primary"
          class="btn"
          :disabled="customerPage == 1 ? true : false"
          @click="upPage"
          >上一页</el-button
        >
        <el-button
          type="primary"
          class="btn"
          @click="nextPage"
          :disabled="this.customerPage >= this.customerSum"
          >下一页</el-button
        >
      </div>
      <div class="bottomSearch">
        <el-input
          placeholder="请输入内容"
          v-model="searchInput"
          style="flex: 1; margin-right: 5px"
        >
        </el-input>
        <el-button type="primary" class="btn">一键推荐</el-button>
      </div>
    </div>
    <div class="right">
      <!-- 债券信息 -->
      <div class="bondCard">
        <div class="bondCardLeft">
          <div class="bondCardTitle">本客特征</div>
          <div class="bondCardLeftCard">
            <div class="bondCardLeftCardItem">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 24px;
                "
              >
                <span style="font-size: 16px">风险偏好度</span
                ><span style="font-size: 12px; padding-top: 3px"
                  >基于息票率预估</span
                >
              </div>
              <div style="font-size: 24px; margin-bottom: 15px">
                <span class="line"></span>{{ featuresInfo.riskPreferences }}
              </div>
              <div style="font-size: 14px">
                <span
                  >总体风险偏好水平
                  <span style="font-size: 15px"
                    >{{ featuresInfo.totalRiskValue }}，</span
                  ></span
                ><span>总体偏离度 </span
                ><span style="font-size: 15px"
                  >{{ featuresInfo.customerDeviation }}
                  <span v-show="this.featuresInfo.riskPreferences !== '待评估'"
                    >%</span
                  >
                </span>
              </div>
            </div>
            <div class="bondCardLeftCardItem">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 24px;
                "
              >
                <span style="font-size: 16px">累计投资规模</span
                ><span style="font-size: 12px; padding-top: 3px"
                  >基于本行历史成交数据的计量</span
                >
              </div>
              <!-- <div style="font-size: 24px; margin-bottom: 15px">
                <span class="line"></span>{{ featuresInfo.investAmount }}万元
              </div> -->
              <div style="font-size: 24px; margin-bottom: 15px">
                <span class="line"></span
                >{{ featuresInfo.investAmount | filterNum }}万元
              </div>
              <div style="font-size: 14px">
                <span
                  >全行排行
                  <span style="font-size: 15px"
                    >{{ featuresInfo.investRanking }}，</span
                  ></span
                ><span>累计总只数</span
                ><span style="font-size: 15px"
                  >{{ featuresInfo.investNumber }}万支</span
                >
              </div>
            </div>
            <div class="bondCardLeftCardItem">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 24px;
                "
              >
                <span style="font-size: 16px">信用风险评估</span
                ><span style="font-size: 12px; padding-top: 3px"
                  >基于盈利水平和信用等级</span
                >
              </div>
              <div style="font-size: 24px; margin-bottom: 15px">
                <span class="line"></span>{{ featuresInfo.riskEvaluation }}
              </div>
              <div style="font-size: 14px">
                <span
                  >处于行业
                  <span style="font-size: 15px"
                    >{{ featuresInfo.industryLevel }}，</span
                  ></span
                ><span>信用风险 </span
                ><span style="font-size: 15px">{{
                  featuresInfo.creditRisk
                }}</span>
              </div>
            </div>
            <div class="bondCardLeftCardItem">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 24px;
                "
              >
                <span style="font-size: 16px">分群标签</span
                ><span style="font-size: 12px; padding-top: 3px"
                  >基于债券综合数据，进行分群</span
                >
              </div>
              <div style="font-size: 24px; margin-bottom: 15px">
                <span class="line"></span>{{ featuresInfo.groupLabel }}
              </div>
              <div style="font-size: 14px">
                <span
                  >收益水平
                  <span style="font-size: 15px"
                    >{{ featuresInfo.incomeLevel }}，</span
                  ></span
                ><span>风险水平 </span
                ><span style="font-size: 15px">{{
                  featuresInfo.riskLevel
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tableBox">
        <div class="tableBoxSearch">
          <el-input placeholder="请输入内容" v-model="searchInput"> </el-input>
          <el-button type="primary" class="btn">一键推荐</el-button>
        </div>
        <div class="bondCardRight">
          <div class="bondCardTitle">相近列表</div>
          <el-table :data="nearData" style="width: 100%">
            <el-table-column type="index" label="序号"> </el-table-column>
            <el-table-column prop="customerNm" label="客户名称">
            </el-table-column>
            <el-table-column prop="similarCustomerId" label="相似客户id">
            </el-table-column>
            <!-- <el-table-column prop="groupIdBond" label="所属债群">
            </el-table-column> -->
            <el-table-column label="相似度" :formatter="xsdFn">
            </el-table-column>
          </el-table>
        </div>
        <div class="bondCardTitle">债券列表</div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="bondSname" label="债券名称"> </el-table-column>
          <el-table-column prop="bondId" label="债券编码"> </el-table-column>
          <el-table-column prop="bondType" label="债券类型"> </el-table-column>
          <el-table-column prop="issuerNm" label="发行人名称">
          </el-table-column>
          <el-table-column prop="termDays" label="期限（天）">
          </el-table-column>
          <el-table-column
            prop="average"
            label="风险偏好值"
            :formatter="fxphzFn"
          >
          </el-table-column>
        </el-table>
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="tableTotal"
          @current-change="pageFn"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getCustomer } from "@/api/common/index.js";
import {
  customerFeature,
  customerSimilarList,
  bondGroup,
} from "@/api/recommendationSystem/index.js";
export default {
  data() {
    return {
      searchList: [],
      tableData: [],
      searchInput: "",
      customerInfo: {},
      total: 0,
      count: "",
      nearData: [],
      featuresInfo: {},
      tableTotal: 0,
      customerPage: 1,
      customerTotal: 0,
      customerSum: 0,
    };
  },
  filters: {
    filterNum(value) {
      const str = value ? value.toString() : "";
      if (str) {
        const reg =
          str.indexOf(".") > -1 ? /\B(?=(\d{3})+\.)/g : /\B(?=(\d{3})+$)/g;
        const returnData = str.replace(reg, ",");
        return returnData;
      } else {
        return "";
      }
    },
  },
  mounted() {
    this.getCustomerFN();
  },
  methods: {
    pageFn(page) {
      bondGroup({ customerId: v.customerID, page: page, pn: 10 }).then(
        (res) => {
          this.tableData = res.data.result;
          this.tableTotal = Number(res.data.totalResults);
        }
      );
    },
    xsdFn(row) {
      // return row.similarRate + "%"
      return (Number(row.similarRate) * 100).toFixed(2) + "%";
    },
    fxphzFn(row) {
      return Number(Number(row.average) * 100).toFixed(2);
    },
    nextPage() {
      this.customerPage = this.customerPage + 1;
      this.getCustomerFN();
    },
    upPage() {
      if (this.customerPage > 1) {
        this.customerPage = this.customerPage - 1;
        this.getCustomerFN();
      }
    },
    clearFn() {
      this.customerInfo = {};
      this.tableTotal = 0;
      this.tableData = [];
      this.nearData = [];
    },
    getCustomerFN() {
      const param = {
        pn: 10,
        page: this.customerPage,
        customerNM: "",
        customerId: "",
      };
      getCustomer(param).then((res) => {
        this.searchList = res.data.result;
        this.customerTotal = Number(res.data.totalResults);
        this.customerSum = Number(res.data.totalPages);
      });
    },
    searchInputFn() {
      this.count = "";
      const param = {
        pn: 10,
        page: 1,
        customerNM: this.searchInput,
        customerId: "",
      };
      getCustomer(param).then((res) => {
        this.searchList = res.data.result;
        this.customerTotal = Number(res.data.totalResults);
        this.customerSum = Number(res.data.totalPages);
      });
    },
    clickFn(v, i) {
      this.clearFn();
      this.count = i;
      this.customerInfo = {
        ...v,
      };
      customerSimilarList({ customerId: v.customerID }).then((res) => {
        this.nearData = res.data;
      });
      // customerList({ customerNM: v.customerNM }).then(res => {
      //   this.tableData = res.data
      // })
      customerFeature({ customerId: v.customerID }).then((res) => {
        this.featuresInfo = res.data;
        // this.featuresInfo.riskPreferences = Number(
        //   this.featuresInfo.riskPreferences
        // ).toFixed(2);
        if (this.featuresInfo.riskPreferences !== "待评估") {
          this.featuresInfo.riskPreferences = Number(
            Number(this.featuresInfo.riskPreferences) * 100
          ).toFixed(2);
        }
        if (this.featuresInfo.riskPreferences !== "待评估") {
          this.featuresInfo.customerDeviation = Number(
            this.featuresInfo.customerDeviation
          ).toFixed(2);
        }
      });
      bondGroup({ customerId: v.customerID, page: 1, pn: 10 }).then((res) => {
        this.tableData = res.data.result;
        this.tableTotal = Number(res.data.totalResults);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;

  .left {
    width: 240px;
    background-color: #262d47;
    height: 100%;
    padding-bottom: 60px;
    position: relative;

    .bottomSearch {
      position: absolute;
      bottom: 15px;
      display: flex;
      padding: 0 10px;
    }
  }

  .right {
    margin-left: 10px;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .searchList {
    padding-top: 10px;
    height: 700px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: scroll;

    .searchListItem {
      height: 35px;
      line-height: 35px;
      text-align: center;
      color: #959fc5;
      font-size: 12px;
      overflow: hidden; //超出隐藏
      white-space: nowrap; //不折行
      text-overflow: ellipsis; //溢出显示省略号
    }

    .searchListItem:hover {
      background: #1f9bfd !important;
      color: #fff;
      cursor: pointer;
    }
  }

  .searchListItemAct {
    background: #1f9bfd !important;
    color: #fff !important;
  }

  .bondCard {
    // background-color: #262d47;
    color: #959fc5;
    margin-bottom: 10px;

    .bondCardRight {
      flex: 1;
      background-color: #262d47;
      margin-bottom: 15px;
    }

    .bondCardLeftCard {
      background-color: #262d47;

      display: flex;
      padding: 0 10px;
      padding-bottom: 10px;
      margin-bottom: 10px;

      .bondCardLeftCardItem {
        color: #fff;
        width: 330px;
        min-height: 150px;
        background: rgba(53, 64, 96, 0.5)
          linear-gradient(90deg, #ea6c79 0%, #ee8f64 100%);
        border-radius: 6px;
        margin-right: 15px;
        margin-top: 10px;
        padding-top: 16px;
        padding-left: 19px;
        padding-right: 19px;
        padding-bottom: 10px;

        .line {
          width: 6px;
          height: 6px;
          background: #ffffff;
          box-shadow: 0px 0px 6px 1px #ffffff;
          display: inline-block;
          border-radius: 50%;
          vertical-align: middle;
          margin-bottom: 8px;
          margin-right: 15px;
        }
      }

      .bondCardLeftCardItem:nth-child(2) {
        background: rgba(53, 64, 96, 0.5)
          linear-gradient(90deg, #49a2f7 0%, #6b83f7 100%);
      }

      .bondCardLeftCardItem:nth-child(3) {
        background: rgba(53, 64, 96, 0.5)
          linear-gradient(90deg, #705df6 0%, #a25ef8 100%);
      }

      .bondCardLeftCardItem:nth-child(4) {
        background: rgba(53, 64, 96, 0.5)
          linear-gradient(90deg, #5fbc7c 0%, #81bb57 100%);
      }
    }
  }

  .bondCardRight {
    margin-bottom: 30px;
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }

  .tableBox {
    background-color: #262d47;
    flex: 1;
    padding: 15px 10px;
  }

  .bondCardRightTitle {
    margin-bottom: 10px;
  }

  .leftTitle {
    height: 40px;
    line-height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding-left: 17px;
    margin-bottom: 10px;
  }

  .bondCardTitle {
    height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding: 10px 16px;
  }

  .tableBoxSearch {
    display: flex;
    justify-content: right;
    margin-bottom: 15px;

    .el-input {
      width: 300px;
      margin-right: 10px;
    }
  }

  .el-pagination {
    text-align: right;
  }
}
</style>
